<template>
	<view class="content">
		<view class="navigate layout-flex-base" :style="{ height: NavBarHeight + 'px', 'line-height': NavBarHeight + 'px', 'padding-top': statusBarHeight + 'px' }">
			<div class="c">我发起的</div>
		</view>
		<view class="des_tabbar">
			<view class="label" @click="showStatus = true">
				<text>{{ statusList[statusIndex] ? statusList[statusIndex].name : "" }}</text>
				<u-icon name="arrow-down" size="20"></u-icon>
			</view>
			<view class="label" @click="showType = true">
				<text>{{ typeList[typeIndex] ? typeList[typeIndex].title : "" }}</text>
				<u-icon name="arrow-down" size="20"></u-icon>
			</view>
			<view class="label" @click="showStartTime = true">
				<text>{{ time }}</text>
				<u-icon name="arrow-down" size="20"></u-icon>
			</view>
		</view>
		<view class="main_list" v-if="initiatedTotal > 0">
			<view class="item">
				<view :class="['label', { ytg: item.status == 2 }, { ybh: item.status == 3 }, { ycx: item.status == 4 }]" v-for="(item, index) in initiatedList" :key="index" @click="info(item)">
					<view class="t">
						<view class="name">
							<text class="f">{{ item.appName || "" }}</text>
							<text class="des">{{ displayStatusName(item.status) }}</text>
						</view>
						<view class="date">
							<uni-dateformat :date="item.createTime" format="yyyy-MM-dd"></uni-dateformat>
						</view>
					</view>
					<div class="cancel" v-if="[1, 5].includes(+item.status)">
						<div class="apply" @click.stop="onCancelApply(item)">撤销申请</div>
					</div>
				</view>
			</view>
		</view>
		<view class="null" v-if="initiatedTotal <= 0">
			<view>
				<image src="../../static/process-flow/forms_07.jpg" mode="widthFix"></image>
				<text>暂无内容</text>
			</view>
		</view>
		<u-picker mode="selector" @cancel="cancelStatus" @confirm="choiceStatus" v-model="showStatus" :default-selector="[0]" range-key="name" :range="statusList"></u-picker>
		<u-picker mode="selector" @cancel="cancelType" @confirm="choiceType" v-model="showType" :default-selector="[0]" range-key="title" :range="typeList"></u-picker>
		<u-picker mode="time" @cancel="cancelStartTime" @confirm="choiceStartTime" v-model="showStartTime" :params="params"></u-picker>
		<!-- <view style="height: 110rpx"></view> -->

		<v-modal ref="vModalRef"></v-modal>
	</view>
</template>

<script>
import { listHolidayType, myTasksList, approveStatus, flowConfigList, cancelTask } from "@/uni/uni.js"
import mixin from "@/mixin"
import vModal from "../form/components/upload/modal.vue"
export default {
	mixins: [mixin],
	data() {
		return {
			showStatus: false,
			statusList: [],
			statusIndex: 0,
			showType: false,
			typeList: [],
			typeIndex: 0,
			time: "提交日期",
			showStartTime: false,
			params: {
				year: true,
				month: true,
				day: true,
				hour: false,
				minute: false,
				second: false,
			},
			initiatedList: [],
			initiatedTotal: 0,
			initiatedQueryParams: {
				keyword: "",
				current: 1,
				size: 10,
				startTime: "",
				type: "",
			},
		}
	},
	onShow() {
		this.typeIndex = 0
		this.statusIndex = 0
		this.time = "提交日期"
		this.initiatedList = []
		this.initiatedQueryParams = {
			current: 1,
			size: 10,
			status: "",
			startTime: "",
			type: "",
		}
		this.todoCount = 0
		this.finishCount = 0
		this.getInitiatedList()
		this.getTypeList()
	},
	onLoad() {
		this.init()
	},
	onReachBottom() {
		if (this.initiatedList.length < this.initiatedTotal) {
			this.initiatedQueryParams.current++
			this.getInitiatedList()
		}
	},
	methods: {
		info(item) {
			this.link(`/pages/flow/approved-by-me/info?&tbId=${item.tid}&id=${item.dataId}&taskId=${item.taskId}&applyUserId=${item.applyUserId}&actKey=${item.actKey}&appName=${item.appName}&processId=${item.processId}&tabbar=${this.tabbar}`)
		},
		displayStatusName(status) {
			let obj = this.statusList.find(item => {
				return item.code == status
			})
			return obj != null ? obj.name : "状态异常"
		},
		init() {
			approveStatus().then(res => {
				this.statusList = res
				this.statusList.unshift({ name: "全部状态", code: "" })
			})
		},
		getInitiatedList() {
			uni.showLoading({
				title: "加载中",
			})
			myTasksList(this.initiatedQueryParams).then(res => {
				this.initiatedList = this.initiatedList.concat(res.records)
				this.initiatedTotal = res.total
				uni.hideLoading()
			})
		},
		// 类型
		getTypeList() {
			flowConfigList().then(res => {
				this.typeList = res.records
				this.typeList.unshift({ title: "类型", code: "" })
			})
		},
		choiceStatus(e) {
			this.initiatedList = []
			this.statusIndex = e[0]
			this.initiatedQueryParams.status = this.statusList[this.statusIndex].code
			this.initiatedQueryParams.current = 1
			this.getInitiatedList()
		},
		cancelStatus(e) {
			this.initiatedList = []
			this.statusIndex = 0
			this.initiatedQueryParams.status = null
			this.initiatedQueryParams.current = 1
			this.getInitiatedList()
		},
		choiceType(e) {
			this.initiatedList = []
			this.typeIndex = e[0]
			this.initiatedQueryParams.current = 1
			this.getInitiatedList()
		},
		cancelType(e) {
			this.initiatedList = []
			this.typeIndex = 0
			this.initiatedQueryParams.type = null
			this.initiatedQueryParams.current = 1
			this.getInitiatedList()
		},
		choiceStartTime(e) {
			this.initiatedList = []
			this.time = e.year + "/" + e.month + "/" + e.day
			this.initiatedQueryParams.current = 1
			this.initiatedQueryParams.startTime = this.time
			this.getInitiatedList()
		},
		cancelStartTime(e) {
			this.initiatedList = []
			this.time = "提交日期"
			this.initiatedQueryParams.startTime = ""
			this.initiatedQueryParams.current = 1
			this.getInitiatedList()
		},
		link(url) {
			uni.navigateTo({
				url,
			})
		},
		links(url) {
			uni.switchTab({
				url,
			})
		},
		// 撤销申请
		async onCancelApply(item) {
			try {
				const { next } = await this.$refs.vModalRef.show({
					title: "提示",
					content: "是否撤销申请?",
					center: true,
				})
				uni.showLoading({
					title: "加载中",
				})
				cancelTask({
					tid: item.tid,
					id: item.dataId,
					pid: item.processId,
				}).then(res => {
					uni.hideLoading()
					uni.showToast({
						title: "撤销申请成功",
						icon: "none",
					})
					this.initiatedList = []
					this.initiatedQueryParams.current = 1
					this.getInitiatedList()
				})
				next()
			} catch (error) {}
		},
	},
	components: {
		vModal,
	},
}
</script>

<style lang="scss">
page {
	background-color: #f6f6f6;
}

.footesr {
	width: 100%;
	height: 120rpx;
	background-color: #fff;
	border-top: 1px solid #f7f7f7;
	display: flex;
	align-items: center;
	position: fixed;
	left: 0;
	bottom: 0;

	view {
		width: 33.33%;
		height: 100%;
		padding-top: 12rpx;

		&.on {
			text {
				color: #4876ff;
			}
		}

		image {
			width: 60rpx;
			display: block;
			margin: 0 auto;
			margin-bottom: 2rpx;
		}

		text {
			display: block;
			font-size: 20rpx;
			color: #666666;
			text-align: center;
		}
	}
}

.content {
	overflow: hidden;
	width: 100%;

	.main_list {
		overflow: hidden;
		width: 100%;

		.item {
			overflow: hidden;
			padding: 0 32rpx;

			.label {
				overflow: hidden;
				width: 100%;
				background-color: #fff;
				border-radius: 20rpx;
				// margin-top: 21rpx;
				margin: 21rpx 0;
				padding: 32rpx 29rpx 25rpx 73rpx;

				&.ytg {
					.user .tip {
						background-color: #e6f8e8;
						color: #0dba1e;
					}

					.t {
						&::after {
							background-color: #0dba1e;
						}

						.name .des {
							background-color: #e6f8e8;
							color: #0dba1e;
						}
					}
				}

				&.ycx {
					.user .tip {
						background-color: #e6f8e8;
						color: #0dba1e;
					}

					.t {
						&::after {
							background-color: #ff774e;
						}

						.name .des {
							background-color: #fff1ed;
							color: #ff774e;
						}
					}
				}

				&.ybh {
					.user .tip {
						background-color: #ffebea;
						color: #ff3a30;
					}

					.t {
						&::after {
							background-color: #ff3a30;
						}

						.name .des {
							background-color: #ffebea;
							color: #ff3a30;
						}
					}
				}

				.font {
					display: block;
					font-size: 26rpx;
					color: #666666;
					line-height: 50rpx;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}

				.user {
					display: flex;
					align-items: center;
					margin-top: 30rpx;
					justify-content: space-between;

					.cl {
						display: flex;
						align-items: center;

						image {
							border-radius: 6rpx;
							width: 42rpx;
						}

						text {
							font-size: 27rpx;
							color: #000000;
							margin-left: 14rpx;
						}
					}

					.tip {
						display: inline-flex;
						align-items: center;
						height: 31rpx;
						font-size: 23rpx;
						color: #4776ff;
						padding: 0 10rpx;
						margin-left: 10rpx;
						background-color: #ecf1ff;
					}
				}

				.t {
					display: flex;
					margin-bottom: 15rpx;
					align-items: center;
					justify-content: space-between;
					position: relative;

					&::after {
						content: "";
						width: 25rpx;
						height: 25rpx;
						border-radius: 50%;
						background-color: #4776ff;
						position: absolute;
						left: -46rpx;
						top: 9rpx;
					}

					.date {
						font-size: 23rpx;
						color: #999999;
					}

					.name {
						display: flex;
						align-items: center;

						.f {
							font-size: 31rpx;
							color: #000000;
							font-weight: bold;
						}

						.des {
							display: inline-flex;
							align-items: center;
							height: 31rpx;
							font-size: 23rpx;
							color: #4776ff;
							padding: 0 10rpx;
							margin-left: 10rpx;
							background-color: #ecf1ff;
						}
					}
				}
				.cancel {
					font-size: 24rpx;
					display: flex;
					justify-content: flex-end;
					.apply {
						color: #dd524d;
						background-color: #fef0f0;
						padding: 0 20rpx;
						border-radius: 10rpx;
						border: 1px solid #fbc4c4;
					}
				}
			}
		}
	}

	.null {
		overflow: hidden;
		width: 100%;
		height: calc(100vh - 256rpx);
		display: flex;
		align-items: center;
		justify-content: center;

		view {
			overflow: hidden;
			width: 100%;

			image {
				width: 462rpx;
				display: block;
				margin: 0 auto;
				margin-bottom: 36rpx;
			}

			text {
				display: block;
				font-size: 26rpx;
				color: #7090f4;
				text-align: center;
			}
		}
	}

	.des_tabbar {
		width: 100%;
		height: 86rpx;
		border-top: 1px solid #fcfcfc;
		background-color: #fff;
		display: flex;
		align-items: center;

		.label {
			width: 33.33%;
			height: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
			position: relative;

			&.on image {
				transform: rotate(180deg);
			}

			&::after {
				content: "";
				width: 1px;
				height: 29rpx;
				background-color: #fcfcfc;
				position: absolute;
				right: 0;
				top: 50%;
				transform: translateY(-50%);
			}

			&:last-child::after {
				display: none;
			}

			image {
				width: 13rpx;
				transition: all 0.3s;
			}

			text {
				font-size: 26rpx;
				color: #666666;
				margin-right: 12rpx;
			}
		}
	}
}
.navigate {
	width: 100%;
	position: fixed;
	top: 0;
	left: 0;
	background: #fff;
	box-sizing: border-box;
	z-index: 999;
	.l {
		width: 100rpx;
		height: 100%;
		image {
			width: 15rpx;
			position: absolute;
			left: 20rpx;
			top: 50%;
			transform: translateY(-50%);
		}
	}
	.c {
		flex: 1;
		font-size: 32rpx;
		color: #000;
		text-align: center;
	}
	.r {
		width: 100rpx;
		height: 100%;
		span {
			padding: 6rpx 15rpx;
			color: #fff;
			font-size: 26rpx;
			background: $theme-color;
			border-radius: 40rpx;
		}
	}
}
</style>
